<template>
    <div>
        <el-dialog
            v-model="dialogVisible"
            title="请添加绘制区域的标题"
            width="30%"
            :before-close="handleClose"
            class="left-title-dialog"
            style="text-align: left;"
            :close-on-click-modal="false"
            :show-close="showClose"
        >
            <div class="area-s">
                <span class="area-span-s">输入内容：</span>
                <el-input ref="textInput" class="area-inp-s" style="background-color: none;" v-model="userText" placeholder="请添加绘制区域的标题" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
    import {ref, Ref, inject, defineEmits , defineProps , watchEffect } from 'vue';
    const dialogVisible = inject<Ref<boolean>>('dialogVisible');
    const emits = defineEmits(['confirmHtClick', 'cancelHtClick']);
    const userText = ref('');
    const handleClose = () => {
        closeDialog();
    };
    const props = defineProps<{
        isAnewConfig: boolean,
    }>();
    
    let showClose: boolean;
    showClose = true;
    watchEffect(() => {
        // showClose = props.isAnewConfig ? false : true;
    });

    // 取消事件
    const cancelClick = () => {
        closeDialog();
    };

    // 确定事件
    const confirmClick = () => {
        emits('confirmHtClick',userText.value);
        userText.value = '';
    };

    // 关闭弹窗事件
    const closeDialog = () => {
        emits('cancelHtClick');
        userText.value = '';
    };
</script>
<style scoped lang="scss">
.area-s{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: auto;
}
.area-span-s{
    width: 100px;
    font-size: 14px;
}
button:focus{
    outline: none!important;
}
</style>